<template>
  <div class="input-container">
    <img :src="totalPic.index7" alt>
    <div class="input-tel">
      <div class="btn">
        <img @click="jionUs" :src="totalPic.jion_us" alt>
        <img @click.once="playMyself" :src="totalPic.play_myself" alt>
      </div>
      <input type="text" v-model="telPhone" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" placeholder="填写邀请人电话号码">
    </div>
    <div class="share" @click="shareFriend"></div>
    <scroll class="input-scroll" :data="goodsList" time="1500"></scroll>
  </div>
</template>
<script>
import { filterPic } from "../apis/utils.js";
import { joinAddGroupCake, setEstablishCake } from "../apis/apis.js";
import scroll from "./scroll";
export default {
  data() {
    return {
      telPhone: "",
      totalPic: {},
      goodsList: [
        {
          name: "用户XXX",
          coupon: "获得满399元减32.8"
        },
        {
          name: "用户XXX",
          coupon: "获得3天svip体验"
        },
        {
          name: "用户XXX",
          coupon: "获得3天svip体验"
        }
      ]
    };
  },

  props: {
    onSuccess: Function
  },

  created() {
    const imgUrl = {
      index7: "7.jpg",
      jion_us: "jion_us.png",
      play_myself: "play_myself.png"
    };
    this.totalPic = filterPic(imgUrl);
  },

  methods: {
    jionUs() {
      if (!this.telPhone) {
        this.$vux.toast.text("请输入手机号!", "top");
        return;
      }
      if (this.telPhone.length != 11) {
        this.$vux.toast.text("请输入正确手机号!", "top");
        return;
      }

      joinAddGroupCake(self.params.personInfo.user_id, this.telPhone).then(
        ({ data }) => {
          console.log(data);
          if (data.type == 4) {
            window.params.userInfo.captain = 2;
            this.onSuccess(4);
          } else {
            this.$vux.toast.text(data.message, "top");
          }
        }
      );
    },

    playMyself() {
      this.onSuccess(4);
      setEstablishCake(self.params.personInfo.user_id).then(({ data }) => {
        window.params.userInfo.captain = 1;
        // console.log(data)
      });
    },

    shareFriend() {
      share("周年庆", "周年庆活动，邀请朋友一起赢iPhone", "");
    }
  },
  components: {
    scroll
  }
};
</script>
<style lang='less' scoped>
input::-webkit-input-placeholder {
  text-align: center;
}

input {
  width: 5.31rem;
  height: 0.58rem;
  border: none;
  outline: none;
  border-radius: 0.3rem;
  text-indent: 0.1rem;
  text-align: center;
  user-select: auto;
}

.input-tel {
  position: absolute;
  top: 7.85rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  .btn {
    margin-bottom: 0.12rem;
    display: flex;
    justify-content: space-around;
    padding: 0 1rem;
    img {
      width: 2.28rem;
      height: 0.5rem;
    }
  }
}

.input-scroll {
  position: absolute;
  top: 2.2rem;
  left: 3.3rem;
  font-size: 0.28rem;
}

.share {
  position: absolute;
  right: 1rem;
  bottom: 0.4rem;
  z-index: 6;
  width: 3.28rem;
  height: 1.8rem;
}
</style>